
<!--
    医生信息管理页面
    温世杰
 -->
 <template>
  <div>
    <el-card style="margin-bottom: 10px">
      <el-input
        v-model="queryUserName"
        style="width: 200px"
        placeholder="请输入昵称"
        suffix-icon="el-icon-message"
      ></el-input>
      <el-button
        class="custom-button ml-10"
        icon="el-icon-search"
        @click="load()"
        >搜索</el-button
      >
      <el-button
        style="margin-left: 30px"
        class="custom-buttonT"
        icon="el-icon-plus"
        @click="physicianAdd()"
        >添加</el-button
      >
    </el-card>
    <!-- 表格数据 -->
    <el-card>
      <el-table :data="tableData" border stripe height="600">
        <el-table-column prop="imageId" label="头像" width="100">
          <template slot-scope="scope">
            <el-avatar
              :src="$imageUrl + scope.row.imageId"
              :size="60"
              @error="true"
            ></el-avatar>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="医生姓名" width="160" />
        <el-table-column prop="job" label="是否在职" width="100">
          <template slot-scope="scope">
            {{ scope.row.job == 1 ? "在职" : scope.row.job == 2 ? "离职" : "" }}
          </template>
        </el-table-column>
        <el-table-column prop="hospital" label="所属医院" width="160" />
        <el-table-column prop="department" label="科室" width="160" />
        <el-table-column prop="title" label="职称" width="160" />
        <el-table-column prop="life" label="从业年限" width="60">
          <template slot-scope="scope"> {{ scope.row.life }}年</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              class="pass_button"
              @click="details(scope.row)"
              icon="el-icon-info"
              >详情
            </el-button>
            <el-button
              class="pass_button"
              @click="modifyUpdate(scope.row)"
              icon="el-icon-edit"
              >修改
            </el-button>
            <!-- <el-button
              class="pass_button"
              @click="delPhysicianInfo(scope.row.id)"
              icon="el-icon-delete"
              >删除</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 修改 -->
    <el-dialog
      :title="title"
      top="4vh"
      :visible.sync="physicianViews"
      width="60%"
    >
      <el-form
        :model="updateForm"
        :rules="rules"
        ref="updateForm"
        :inline="true"
      >
        <el-form-item label="头像" prop="imageId">
          <el-upload
            class="avatar-uploader"
            action="'getImageById?id='+scope.row.imageId"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
          >
            <el-image
              v-if="updateForm.imageId"
              :src="$imageUrl + updateForm.imageId"
              class="avatar"
            ></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="个人照片" prop="personalPhotos">
          <el-upload
            class="avatar-uploader"
            action="'getImageById?id='+scope.row.personalPhotos"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload1"
          >
            <el-image
              v-if="updateForm.personalPhotos"
              :src="$imageUrl + updateForm.personalPhotos"
              class="avatar"
            ></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="医生姓名" prop="userName">
          <el-input
            v-model="updateForm.userName"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="userSex">
          <el-radio-group v-model="updateForm.userSex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" prop="userBirthday">
          <el-date-picker
            v-model="updateForm.userBirthday"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          >
            >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="手机号" prop="userPhone">
          <el-input
            v-model="updateForm.userPhone"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="updateForm.address" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否在职" prop="job">
          <el-radio-group v-model="updateForm.job">
            <el-radio :label="1">在职</el-radio>
            <el-radio :label="2">离职</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所属医院" prop="hospital">
          <el-input
            v-model="updateForm.hospital"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="科室" prop="department">
          <el-input
            v-model="updateForm.department"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="职称" prop="title">
          <el-input v-model="updateForm.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="从业年限" prop="life">
          <el-input
            v-model="updateForm.life"
            auto-complete="off"
          ></el-input> </el-form-item
        ><el-form-item label="身份证号" prop="identityNumber">
          <el-input
            v-model="updateForm.identityNumber"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="医师证号" prop="physicianNumber">
          <el-input
            v-model="updateForm.physicianNumber"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="执业证书" prop="certificatePhoto">
          <el-upload
            class="avatar-uploader"
            action="'getImageById?id='+scope.row.certificatePhoto"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload2"
          >
            <el-image
              v-if="updateForm.certificatePhoto"
              :src="$imageUrl + updateForm.certificatePhoto"
              class="avatar"
            ></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="physicianViews = false">取 消</el-button>
        <el-button type="primary" @click="update('updateForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!--添加  -->
    <el-dialog :title="title" top="4vh" :visible.sync="addViews" width="60%">
      <el-form
        :model="updateForm"
        ref="updateForm"
        :inline="true"
        :rules="rules"
      >
        <el-form-item label="头像" prop="imageId">
          <el-upload
            class="avatar-uploader"
            action="'getImageById?id='+scope.row.imageId"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
          >
            <el-image
              v-if="updateForm.imageId"
              :src="
                isNumber(updateForm.imageId)
                  ? $imageUrl + updateForm.imageId
                  : updateForm.imageId
              "
              class="avatar"
            ></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="个人照片" prop="personalPhotos">
          <el-upload
            class="avatar-uploader"
            action="'getImageById?id='+scope.row.personalPhotos"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload1"
          >
            <el-image
              v-if="updateForm.personalPhotos"
              :src="
                isNumber(updateForm.personalPhotos)
                  ? $imageUrl + updateForm.personalPhotos
                  : updateForm.personalPhotos
              "
              class="avatar"
            ></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="医生姓名" prop="userName">
          <el-input
            v-model="updateForm.userName"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="userSex">
          <el-radio-group v-model="updateForm.userSex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" prop="userBirthday">
          <el-date-picker
            v-model="updateForm.userBirthday"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          >
            >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="手机号" prop="userPhone">
          <el-input
            v-model="updateForm.userPhone"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="updateForm.address" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否在职" prop="job">
          <el-radio-group v-model="updateForm.job">
            <el-radio :label="1">在职</el-radio>
            <el-radio :label="2">离职</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所属医院" prop="hospital">
          <el-input
            v-model="updateForm.hospital"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="科室" prop="department">
          <el-input
            v-model="updateForm.department"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="职称" prop="title">
          <el-input v-model="updateForm.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="从业年限" prop="life">
          <el-input
            type="number"
            v-model.number="updateForm.life"
            auto-complete="off"
          ></el-input> </el-form-item
        ><el-form-item label="身份证号" prop="identityNumber">
          <el-input
            v-model="updateForm.identityNumber"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="医师证号" prop="physicianNumber">
          <el-input
            v-model.number="updateForm.physicianNumber"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="执业证书" prop="certificatePhoto">
          <el-upload
            class="avatar-uploader"
            action="'getImageById?id='+scope.row.certificatePhoto"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload2"
          >
            <el-image
              v-if="updateForm.certificatePhoto"
              :src="
                isNumber(updateForm.certificatePhoto)
                  ? $imageUrl + updateForm.certificatePhoto
                  : updateForm.certificatePhoto
              "
              class="avatar"
            ></el-image>
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="physicianViews = false">取 消</el-button>
        <el-button type="primary" @click="add('updateForm')">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 医师详情 -->
    <el-dialog :title="title" :visible.sync="detailsViews" width="60%">
      <el-form
        :model="updateForm"
        ref="updateForm"
        :inline="true"
        :disabled="true"
      >
        <el-form-item label="头像">
          <el-image :src="$imageUrl + updateForm.imageId" class="avatar"></el-image>
        </el-form-item>
        <el-form-item label="个人照片">
          <el-image :src="$imageUrl + updateForm.personalPhotos" class="avatar"> </el-image>
        </el-form-item>
        <el-form-item label="医生姓名" prop="userName">
          <el-input
            v-model="updateForm.userName"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="userSex">
          <el-radio-group v-model="updateForm.userSex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group> </el-form-item
        ><el-form-item label="年龄" prop="doctorAge">
          <el-input
            v-model="updateForm.doctorAge"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="生日" prop="userBirthday">
          <el-date-picker
            v-model="updateForm.userBirthday"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="手机号" prop="userPhone">
          <el-input
            v-model="updateForm.userPhone"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="updateForm.address" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否在职" prop="job">
          <el-radio-group v-model="updateForm.job">
            <el-radio :label="1">在职</el-radio>
            <el-radio :label="2">离职</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="所属医院" prop="hospital">
          <el-input
            v-model="updateForm.hospital"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="科室" prop="department">
          <el-input
            v-model="updateForm.department"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="职称" prop="title">
          <el-input v-model="updateForm.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="从业年限" prop="life">
          <el-input
            v-model="updateForm.life"
            auto-complete="off"
          ></el-input> </el-form-item
        ><el-form-item label="身份证号" prop="identityNumber">
          <el-input
            v-model="updateForm.identityNumber"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="医师证号" prop="physicianNumber">
          <el-input
            v-model="updateForm.physicianNumber"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="执业证书">
          <el-image :src="$imageUrl + updateForm.certificatePhoto" class="avatar">
          </el-image>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      class="pageAll"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      style="text-align: center"
    >
    </el-pagination>
  </div>
</template>

<script>
// import  request  from '@/utils/request.js'

export default {
  data() {
    return {
      //弹窗的标题
      title: "",
      handleAvatarSuccess: "",
      detailsViews: false, // 医师详情弹框
      Fileimage: "", // 头像
      Fileimage1: "", // 医师个人图片
      Fileimage2: "", // 执业证书的照片
      addViews: false, //添加弹窗
      physicianViews: false, // 医师修改弹框
      currentPage4: 1, // 默认第几页
      // 表格数据
      tableData: [],
      // multipleSelection:[],
      pageNum: 1,
      pageSize: 5,
      total: 0,
      avatarUrl: "",
      // 模糊查搜索框数值
      queryUserName: "",
      rules: {
        imageId: [
          { required: true, message: "请上传医师头像", trigger: "change" },
        ],
        personalPhotos: [
          { required: true, message: "请上传医师个人照片", trigger: "change" },
        ],
        certificatePhoto: [
          { required: true, message: "请上传执业医师证书", trigger: "change" },
        ],
        userName: [
          { required: true, message: "请输入医师姓名", trigger: "blur" },
        ],
        userBirthday: [
          {
            required: true,
            message: "请选择生日",
            trigger: "change",
          },
        ],
        userSex: [{ required: true, message: "请选择性别", trigger: "change" }],
        title: [{ required: true, message: "请输入职称", trigger: "blur" }],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        job: [{ required: true, message: "请选择职业状态", trigger: "change" }],
        hospital: [
          { required: true, message: "请输入上一家任职医院", trigger: "blur" },
        ],
        department: [
          { required: true, message: "请输入任职科室", trigger: "blur" },
        ],
        identityNumber: [
          { required: true, message: "请输入身份证号码", trigger: "blur" },
          {
            pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/,
            message: "身份证号码格式不正确",
            trigger: "blur",
          },
        ],
        life: [
          {
            required: true,
            message: "请输入从业年限",
            trigger: "blur",
          },
          { type: "number", message: "请输入数字类型", trigger: "change" },
        ],
        physicianNumber: [
          {
            required: true,
            message: "请输入医师证号",
            trigger: "blur",
          },
          { type: "number", message: "请输入数字类型", trigger: "change" },
        ],
        userPhone: [
          { required: true, message: "请输入手机号码", trigger: "blur" },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确的手机号码",
            trigger: ["blur", "change"],
          },
        ],
      },
      updateForm: {
        doctorAge: "", //年龄
        userName: "",
        userBirthday: "",
        title: "",
        address: "",
        job: "",
        hospital: "",
        department: "",
        physicianNumber: "",
        life: "",
        personalPhotos: null,
        certificatePhoto: null,
        identityNumber: null,
        userPhone: null,
        userSex: "",
      },
    };
  },
  mounted() {
    this.load();
  },
  // 方法集合
  methods: {
    //上传头像
    beforeAvatarUpload(file) {
      // 上传log图片格式
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传logo图片只能是JPG/PNG格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
      // 赋值
      this.Fileimage = file;
      this.updateForm.imageId = URL.createObjectURL(file);
      // isJPG && isLt2M 自动提交 false 是点击确定后提交
      return false;
    },
    //上传个人信息
    beforeAvatarUpload1(file) {
      // 上传log图片格式
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传logo图片只能是JPG/PNG格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
      // 赋值
      this.Fileimage1 = file;
      this.updateForm.personalPhotos = URL.createObjectURL(file);
      // isJPG && isLt2M 自动提交 false 是点击确定后提交
      return false;
    },
    //上传执业照片
    beforeAvatarUpload2(file) {
      // 上传微信服务小程序图片格式
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
        return false;
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
        return false;
      }
      // 赋值
      this.Fileimage2 = file;
      this.updateForm.certificatePhoto = URL.createObjectURL(file); // isJPG && isLt2M 自动提交 false 是点击确定后提交
      // isJPG && isLt2M 自动提交 false 是点击确定后提交
      return false;
    },
    //添加医师
    physicianAdd() {
      this.title = "添加";
      this.addViews = true;
      this.updateForm = {
        imageId: "",
        personalPhotos: "",
        certificatePhoto: "",
        doctorAge: "", //年龄
        userName: "",
        userBrithday: "",
        title: "",
        address: "",
        job: "",
        hospital: "",
        department: "",
        physicianNumber: "",
        life: null,
        personalPhotos: "",
        certificatePhoto: "",
        identityNumber: "",
        userPhone: "",
      };
    },
    //修改医师信息
    modifyUpdate(row) {
      // 修改医师信息
      this.title = "医师详情";
      this.physicianViews = true;
      this.updateForm = JSON.parse(JSON.stringify(row));
      this.updateForm.physicianNumber = Number(this.updateForm.physicianNumber);
    }, //打开医师详情页面
    details(row) {
      // 医师信息详情
      this.title = "医师详情";
      this.detailsViews = true;
      this.updateForm = JSON.parse(JSON.stringify(row));
      this.updateForm.personalPhotos = this.$imageUrl + row.personalPhotos;
      this.updateForm.certificatePhoto = this.$imageUrl + row.certificatePhoto;
      this.updateForm.imageId = this.$imageUrl + row.imageId;
    },
    //添加方法
    add(updateForm) {
      // 添加医师 修改医师
      this.$refs[updateForm].validate((valid) => {
        if (valid) {
          const formData = new FormData();
          for (const key in this.updateForm) {
            if (this.updateForm[key] != null) {
              formData.set(key, this.updateForm[key]);
            }
          }
          if (this.Fileimage) {
            formData.set("file", this.Fileimage, this.Fileimage.name);
            formData.delete("imageId");
          }
          if (this.Fileimage1) {
            formData.set("file1", this.Fileimage1, this.Fileimage1.name);
            formData.delete("personalPhotos");
          }
          if (this.Fileimage2) {
            formData.set("file2", this.Fileimage2, this.Fileimage2.name);
            formData.delete("certificatePhoto");
          }

          this.$axios
            .post("/physician/addPhy", formData)
            .then((res) => {
              if (res.data.flag) {
                this.myMessage("success", "操作成功"); // 添加或修改成功提示
                this.addViews = false; // 关闭窗口
                this.load();
              } else {
                this.myMessage("warning", res.data.code);
              }
            })
            .catch((err) => {
              console.log(err);
              this.myMessage("warning", "对不起，保存失败，请您稍后再试！"); // 添加或修改失败
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //判断是不是数字
    isNumber(number) {
      var numReg = /^[0-9]*$/;

      var numRe = new RegExp(numReg);

      if (!numRe.test(number)) {
        return false;
      }
      return true;
    },
    //修改方法
    update(updateForm) {
      // 添加医师 修改医师
      this.$refs[updateForm].validate((valid) => {
        if (valid) {
          const formData = new FormData();

          for (const key in this.updateForm) {
            if (this.updateForm[key] != null) {
              formData.set(key, this.updateForm[key]);
            }
          }
          if (this.Fileimage) {
            formData.set("file", this.Fileimage, this.Fileimage.name);
            formData.delete("imageId");
          }
          if (this.Fileimage1) {
            formData.set("file1", this.Fileimage1, this.Fileimage1.name);
            formData.delete("personalPhotos");
          }
          if (this.Fileimage2) {
            formData.set("file2", this.Fileimage2, this.Fileimage2.name);
            formData.delete("certificatePhoto");
          }
          this.$axios
            .post("/physician/updatePhy", formData)
            .then((res) => {
              if (res.data.flag) {
                this.myMessage("success", "操作成功"); // 添加或修改成功提示
                this.physicianViews = false; // 关闭窗口
                this.load();
              } else {
                this.myMessage("warning", res.data.code);
              }
            })
            .catch((err) => {
              console.log(err);
              this.myMessage("warning", "对不起，保存失败，请您稍后再试！"); // 添加或修改失败
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    myMessage(type, message) {
      this.$message({
        message: message,
        type: type,
      });
    },
    // 根据名称查询医生姓名
    load() {
      this.$axios
        .get("/physician/PhysicianListState", {
          params: {
            queryUserName: this.queryUserName,
            pageNum: this.pageNum,
            pageSize: this.pageSize,
          },
        })
        .then((res) => {
          this.tableData = res.data.data.content;
          this.total = res.data.data.totalSize;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 驳回医师状态
    delPhysicianInfo(id) {
      this.$confirm("此操作将医生信息删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$axios
            .delete("/physician/PhysicianUpdate", {
              params: {
                id: id,
              },
            })
            .then((res) => {
              if (res.data.code === 200) {
                this.myMessage("success", "删除成功");
                this.load();
              } else {
                this.myMessage("warning", "删除失败");
              }
            })
            .catch((res) => {
              this.myMessage("error", "删除失败，请联系管理员");
            });
        })
        .catch((res) => {
          this.myMessage("info", "已取消删除");
        });
    },
    handleSizeChange(val) {
      // 改变每页条数
      this.pageSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      // 改变当前页
      this.pageNum = val;
      this.load();
    },
  },
};
</script>

<style scoped>
html.body {
  height: 100%;
}
</style>
